<template>
  <el-select v-model="currentValue" :multiple="multi" :remote-method="fetchData" filterable remote reserve-keyword
    clearable automatic-dropdown placeholder="选择或搜索题库" class="filter-item" @change="handlerChange">
    <el-option v-for="item in dataList" :key="item.id" :label="item.title" :value="item.id" />
  </el-select>
</template>

<script>

import { fetchPaging } from '@/api/qu/repo'

export default {
  name: 'RepoSelect',
  props: {
    multi: {
      type: Boolean,
      default: false
    },

    value: String,
  },
  data() {
    return {
      // 下拉选项值
      dataList: [],
      currentValue: ''
    }
  },

  watch: {
    // 检测查询变化
    value: {
      handler() {
        this.currentValue = this.value
      }
    }
  },
  async mounted() {
    this.currentValue = this.value
    await this.fetchData()
  },
  methods: {

    async fetchData(q) {
      console.log(q)
      const res = await fetchPaging({ currentPage: 1, size: 100, id: this.$store.state.user.userId });
      this.dataList = res.data.records;
    },
    handlerChange(e) {
      console.log("repo " + e)
      const obj = this.dataList.find((item) => {
        return item.id === e
      })
      this.$emit('change', obj)
      this.$emit('input', e)
    }
  }
}
</script>
